
<template>
  <div class="common-layout">
    <el-container>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="6"><div class="grid-content ep-bg-purple" />
            <el-card style="max-width: 320px">
              <div>
                <div ref="chartRef2" style="width: 100%;height:300px;"></div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6"><div class="grid-content ep-bg-purple" />
            <el-card style="max-width: 320px">
              <div>
                <div ref="chartRef4" style="width: 100%;height:300px;"></div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6"><div class="grid-content ep-bg-purple" />
            <el-card style="max-width: 320px">
              <div>
                <div ref="chartRef5" style="width: 100%;height:300px;"></div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6"><div class="grid-content ep-bg-purple" />
            <el-card style="max-width: 320px">
              <div>
                <div ref="chartRef6" style="width: 100%;height:300px;"></div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>


  <!-- 订单交易数量-->
  <div class="common-layout">
    <div class="custom-header">订单交易数量</div>
    <el-container style="height: 450px">
      <el-aside width="160px">
        <el-row>
          <el-col>
            <div class="statistic-card">
              <br/><br/><br/><br/>
              <el-statistic :value="98500">
                <template #title>
                  <div style="display: inline-flex; align-items: center">
                    今日成交订单
                    <el-tooltip
                        effect="dark"
                        content="Number of users who logged into the product in one day"
                        placement="top"
                    >
                      <el-icon style="margin-left: 4px" :size="12">
                        <Warning />
                      </el-icon>
                    </el-tooltip>
                  </div>
                </template>
              </el-statistic>
              <div class="statistic-footer">
                <div class="footer-item">
                  <span>对比昨日</span>
                  <span class="green">
              24%
              <el-icon>
                <CaretTop />
              </el-icon>
            </span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <br/><br/><br/>
        <el-row>
          <el-col>
            <div class="statistic-card">
              <el-statistic :value="693700">
                <template #title>
                  <div style="display: inline-flex; align-items: center">
                    昨日成交订单
                    <el-tooltip
                        effect="dark"
                        content="Number of users who logged into the product in one month"
                        placement="top"
                    >
                      <el-icon style="margin-left: 4px" :size="12">
                        <Warning />
                      </el-icon>
                    </el-tooltip>
                  </div>
                </template>
              </el-statistic>
            </div>
          </el-col>
        </el-row>
      </el-aside>
      <el-main>
        <el-row >
          <el-col :span="12">
            <div class="grid-content ep-bg-purple">
              <el-card class="center-image" style="max-width:550px;margin-bottom: 0px">
                <div>
                  <div ref="chartRef1" style="width: 100%;height:360px;"></div>
                </div>
              </el-card>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light" />
            <el-card style="max-width: 550px">
              <div>
                <div ref="chartRef3" style="width: 100%;height:360px;"></div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
  <div class="common-layout">
    <div class="custom-header">订单交易金额</div>
    <el-container style="height: 450px">
      <el-aside width="160px">
        <el-row>
          <el-col>
            <div class="statistic-card">
              <br/><br/><br/><br/>
              <el-statistic :value="98500">
                <template #title>
                  <div style="display: inline-flex; align-items: center">
                    今日成交金额
                    <el-tooltip
                        effect="dark"
                        content="Number of users who logged into the product in one day"
                        placement="top"
                    >
                      <el-icon style="margin-left: 4px" :size="12">
                        <Warning />
                      </el-icon>
                    </el-tooltip>
                  </div>
                </template>
              </el-statistic>
              <div class="statistic-footer">
                <div class="footer-item">
                  <span>对比昨日</span>
                  <span class="green">
              24%
              <el-icon>
                <CaretTop />
              </el-icon>
            </span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <br/><br/><br/><br/>
        <el-row>
          <el-col>
            <div class="statistic-card">
              <el-statistic :value="693700">
                <template #title>
                  <div style="display: inline-flex; align-items: center">
                    昨日成交金额
                    <el-tooltip
                        effect="dark"
                        content="Number of users who logged into the product in one month"
                        placement="top"
                    >
                      <el-icon style="margin-left: 4px" :size="12">
                        <Warning />
                      </el-icon>
                    </el-tooltip>
                  </div>
                </template>
              </el-statistic>
            </div>
          </el-col>
        </el-row>
      </el-aside>
      <el-main>
        <el-row >
          <el-col :span="12">
            <div class="grid-content ep-bg-purple">
              <el-card class="center-image" style="max-width:550px;margin-bottom: 0px">
                <div>
                  <div ref="chartRef7" style="width: 100%;height:360px;"></div>
                </div>
              </el-card>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light" />
            <el-card style="max-width: 550px">
              <div>
                <div ref="chartRef8" style="width: 100%;height:360px;"></div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
  <div class="common-layout">
    <div class="custom-header">用户登录日志</div>
    <el-container style="height: 450px">
      <el-aside width="160px">
        <el-row>
          <el-col>
            <div class="statistic-card">
              <br/><br/><br/><br/>
              <el-statistic :value="98500">
                <template #title>
                  <div style="display: inline-flex; align-items: center">
                    今日登录次数
                    <el-tooltip
                        effect="dark"
                        content="Number of users who logged into the product in one day"
                        placement="top"
                    >
                      <el-icon style="margin-left: 4px" :size="12">
                        <Warning />
                      </el-icon>
                    </el-tooltip>
                  </div>
                </template>
              </el-statistic>
              <div class="statistic-footer">
                <div class="footer-item">
                  <span>对比昨日</span>
                  <span class="green">
              24%
              <el-icon>
                <CaretTop />
              </el-icon>
            </span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <br/><br/><br/><br/>
        <el-row>
          <el-col>
            <div class="statistic-card">
              <el-statistic :value="693700">
                <template #title>
                  <div style="display: inline-flex; align-items: center">
                    昨日登录次数
                    <el-tooltip
                        effect="dark"
                        content="Number of users who logged into the product in one month"
                        placement="top"
                    >
                      <el-icon style="margin-left: 4px" :size="12">
                        <Warning />
                      </el-icon>
                    </el-tooltip>
                  </div>
                </template>
              </el-statistic>
            </div>
          </el-col>
        </el-row>
      </el-aside>
      <el-main>
        <el-row >
          <el-col :span="12">
            <div class="grid-content ep-bg-purple">
              <el-card class="center-image" style="max-width:550px;margin-bottom: 0px">
                <div>
                  <div ref="chartRef9" style="width: 100%;height:360px;"></div>
                </div>
              </el-card>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light" />
            <el-card style="max-width: 550px">
              <div>
                <div ref="chartRef10" style="width: 100%;height:360px;"></div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import {
  ArrowRight,
  CaretBottom,
  CaretTop,
  Warning,
}from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue';
import {init} from "echarts";
const chartRef1 = ref(null);
const chartRef2 = ref(null);
const chartRef3 = ref(null);
const chartRef4 = ref(null);
const chartRef5 = ref(null);
const chartRef6 = ref(null);
const chartRef7 = ref(null);
const chartRef8 = ref(null);
const chartRef9 = ref(null);
const chartRef10 = ref(null);



const initChart = () => {
  const myChart = init(chartRef1.value);
  const option = {
    title: {
      text: '周交易订单'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {
      data: ['交易变化率', '订单量']
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: [
      {
        type: 'value',
        name: '成交订单/变化率'
      },
      {
        type: 'value',
        name: '订单量',
        min: 0,
        max: 400,
        interval: 100,
        axisLabel: {
          formatter: '{value}k'
        }
      }
    ],
    series: [{
      name: '交易变化率',
      type: 'line',
      data: [3, 4, 5, 6, 3, 4, 2.2] // 假设2015-2019年没有数据，2020年打开率为2.2%
    },
      {
        name: '订单量',
        type: 'bar',
        data: [1, 4, 3, 2, 4, 5, [34.856, 18.225]] // 假设2015-2019年没有数据，2020年销售额为$34,856和$18,225
      },]
  };
  myChart.setOption(option);
}; // 周交易订单


import axios from 'axios';
const initChart1 = () => {
  // 发送HTTP请求获取数据
  axios.get('http://localhost:8080/approvalproduct/coke')
      .then(response => {
        // 从后端获取数据成功后的处理
        const data = response.data;
        console.log(data);

        // 格式化数据为饼图所需格式
        const formattedData = data.map(item => ({
          value: item.product_count,
          name: item.category
        }));

        console.log(formattedData);

        // 初始化echarts实例
        const myChart1 = init(chartRef2.value);
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '1%',
            left: 'center'
          },
          series: [
            {
              type: 'pie',
              radius: ['30%', '70%'],
              center: ['50%', '65%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: formattedData
            }
          ]
        };

        // 设置参数并绘制echarts饼图
        myChart1.setOption(option);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
}






const initChart2 = () => {
  const myChart2 = init(chartRef3.value);
  const option = {
    title: {
      text: '月交易订单'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#FFC0CB'
        }
      }
    },
    legend: {
      data: ['Evaporation', 'Temperature']
    },
    xAxis: [
      {
        type: 'category',
        data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '交易变化率',
        min: 0,
        max: 250,
        interval: 50,
        axisLabel: {
          formatter: '{value} ml'
        }
      },
      {
        type: 'value',
        name: '订单量',
        min: 0,
        max: 25,
        interval: 5,
        axisLabel: {
          formatter: '{value} '
        }
      }
    ],
    series: [
      {
        name: '订单量',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' ml';
          }
        },
        data: [
          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
        ]
      },

      {
        name: '订单量',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + ' ';
          }
        },
        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
      }
    ]
  };
  myChart2.setOption(option);
} // 月交易订单



const initChart3 = () => {
  const myChart3 = init(chartRef4.value);
  const option = {

    dataset: {
      source: [
        ['score', 'amount', 'product'],
        [89.3, 9821, '毕业季跳蚤节'],
        [57.1, 6825, '南区操场音乐节'],
        [74.4, 4103, '步道乐跑活动'],
        [50.1, 1275, '阅读文化节'],
        [89.7, 2014, '阳光户外骑行节'],
        [68.1, 7914, '美术学院艺术展'],

      ]
    },
    grid: {
      containLabel: true,
      bottom: '10%' // 设置图表距离底部的距离
    },
    xAxis: { name: 'amount' },
    yAxis: { type: 'category' },
    visualMap: {
      top: '3%',
      orient: 'horizontal',
      left: 'center',
      min: 10,
      max: 100,
      text: ['High', 'Low'],
      // Map the score column to color
      dimension: 0,
      inRange: {
        color: ['#65B581', '#FFCE99', '#FF5975']
      }
    },
    series: [
      {
        type: 'bar',
        encode: {
          // Map the "amount" column to X axis.
          x: 'amount',
          // Map the "product" column to Y axis
          y: 'product'
        }
      }
    ]
  };


  myChart3.setOption(option);
} // 横柱状图
const initChart4 = () => {
  const myChart4 = init(chartRef5.value);
  const option = {
    title: {
      left: 'center',
      text: '热门搜索商品类别排行'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c}%'
    },
    legend: {
      data: ['Visit','Inquiry','Order', 'Click','Show']
    },
    series: [
      {
        name: 'Funnel',
        type: 'funnel',
        left: '10%',
        top: 80,
        bottom: 20,
        width: '80%',
        min: 0,
        max: 100,
        minSize: '0%',
        maxSize: '100%',
        sort: 'descending',
        gap: 2,
        label: {
          show: true,
          position: 'inside'
        },
        labelLine: {
          length: 15,
          lineStyle: {
            width: 1,
            type: 'solid'
          }
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        },
        emphasis: {
          label: {
            fontSize: 20
          }
        },
        data: [
          { value: 60, name: '学习用品类' },
          { value: 40, name: '体育用品类' },
          { value: 20, name: '生活用品类' },
          { value: 80, name: '乐器类' },
          { value: 100, name: '电子设备类' }
        ]
      }
    ]
  };
  myChart4.setOption(option);
} // 金字塔



const initChart5 = () => {
  const myChart5 = init(chartRef6.value);
  const option = {
    title: {
      left: 'center',
      text: '用户兴趣倾向图'
    },
    legend: {
      data: ['Allocated Budget', 'Actual Spending']
    },
    radar: {
      // shape: 'circle',
      indicator: [
        { name: '音乐', max: 6500 },
        { name: '跑步', max: 16000 },
        { name: '舞蹈', max: 30000 },
        { name: '唱歌', max: 38000 },
        { name: '骑行', max: 52000 },
        { name: '健身', max: 25000 }
      ],
      center: ['50%', '56%'],
    },
    series: [
      {
        name: 'Budget vs spending',
        type: 'radar',
        data: [
          {
            value: [4200, 3000, 20000, 35000, 50000, 18000],
            name: ''
          },
          {
            value: [5000, 14000, 28000, 26000, 42000, 21000],
            name: ''
          }
        ]
      }
    ]
  };
  myChart5.setOption(option);
} // 雷达图



const initChart6 = () => {
  const myChart6 = init(chartRef7.value);
  // 配置项和数据...
  const option = {
    title: {
      text: '周交易金额'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {
      data: ['交易变化率', '订单量']
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: [
      {
        type: 'value',
        name: '成交订单/变化率'
      },
      {
        type: 'value',
        name: '订单量',
        min: 0,
        max: 400,
        interval: 100,
        axisLabel: {
          formatter: '{value}k'
        }
      }
    ],
    series: [{
      name: '交易变化率',
      type: 'line',
      data: [3, 4, 5, 6, 3, 4, 2.2] // 假设2015-2019年没有数据，2020年打开率为2.2%
    },
      {
        name: '订单量',
        type: 'bar',
        data: [1, 4, 3, 2, 4, 5, [34.856, 18.225]] // 假设2015-2019年没有数据，2020年销售额为$34,856和$18,225
      },]
  };
  myChart6.setOption(option);
}; // 周交易金额
const initChart7 = () => {
  const myChart7 = init(chartRef8.value);
  const option = {
    title: {
      text: '月交易金额'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {
      data: ['Evaporation', 'Temperature']
    },
    xAxis: [
      {
        type: 'category',
        data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '订单变化率',
        min: 0,
        max: 250,
        interval: 50,
        axisLabel: {
          formatter: '{value} ml'
        }
      },
      {
        type: 'value',
        name: '订单量',
        min: 0,
        max: 25,
        interval: 5,
        axisLabel: {
          formatter: '{value} '
        }
      }
    ],
    series: [
      {
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' ml';
          }
        },
        data: [
          2.0, 4.9, 7.0, 56.2, 25.6, 76.7, 88.6, 40.2, 32.6, 20.0, 6.4, 3.3
        ]
      },
      {
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + ' °C';
          }
        },
        data: [2.0, 2.2, 3.3, 4.5, 6.3, 19.2, 20.3, 23.4, 53.0, 16.5, 12.0, 6.2]
      }
    ]
  };
  myChart7.setOption(option);
} // 月交易金额
const initChart8 = () => {
  const myChart8 = init(chartRef9.value);
  // 配置项和数据...
  const option = {
    title: {
      text: '周登陆统计'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {
      data: ['交易变化率', '订单量']
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: [
      {
        type: 'value',
        name: '成交订单/变化率'
      },
      {
        type: 'value',
        name: '订单量',
        min: 0,
        max: 400,
        interval: 100,
        axisLabel: {
          formatter: '{value}k'
        }
      }
    ],
    series: [{
      name: '交易变化率',
      type: 'line',
      data: [3, 4, 5, 6, 3, 4, 2.2] // 假设2015-2019年没有数据，2020年打开率为2.2%
    },
      {
        name: '订单量',
        type: 'bar',
        data: [1, 4, 3, 2, 4, 5, [34.856, 18.225]] // 假设2015-2019年没有数据，2020年销售额为$34,856和$18,225
      },]
  };
  myChart8.setOption(option);
}; // 周交易金额
const initChart9 = () => {
  const myChart9 = init(chartRef10.value);
  const option = {
    title: {
      text: '月登陆统计'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {
      data: ['Evaporation', 'Temperature']
    },
    xAxis: [
      {
        type: 'category',
        data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '订单变化率',
        min: 0,
        max: 250,
        interval: 50,
        axisLabel: {
          formatter: '{value} ml'
        }
      },
      {
        type: 'value',
        name: '订单量',
        min: 0,
        max: 25,
        interval: 5,
        axisLabel: {
          formatter: '{value}'
        }
      }
    ],
    series: [
      {
        name: '订单变化率',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' ml';
          }
        },
        data: [
          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3.3
        ]
      },
      {
        name: '订单量',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + ' ';
          }
        },
        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
      }
    ]
  };
  myChart9.setOption(option);
} // 月交易金额



onMounted(() => {
  initChart();
  initChart1();
  initChart2();
  initChart3();
  initChart4();
  initChart5();
  initChart6();
  initChart7();
  initChart8();
  initChart9();
});


</script>

<style scoped>

.custom-header {
  font-size: 20px; /* 增大字体大小 */
  font-weight: bold; /* 字体加粗 */
  color: #5fb7ee; /* 文字颜色 */
}

.no-padding .el-card__body {
  padding: 0; /* 移除内边距 */
}

.no-padding img {
  margin: 0; /* 移除外边距 */
}

:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
}

.statistic-card {
  height: 100%;
  padding: 20px;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}
.red {
  color: var(--el-color-error);
}
</style>
